<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" :time="time" />
        </div>
        <div>
          <a-carousel arrows autoplay :autoplaySpeed="autoplaySpeed">
            <div
              slot="prevArrow"
              slot-scope="props"
              class="custom-slick-arrow"
              style="left: 10px;zIndex: 10"
            >
              <a-icon type="left-circle" @click="next(props)" />
            </div>
            <div
              slot="nextArrow"
              slot-scope="props"
              class="custom-slick-arrow"
              style="right: 10px"
            >
              <a-icon type="right-circle" @click="next(props)" />
            </div>
            <div
              class="bnr-con"
              v-for="(item, index) in eqPageList"
              :key="index"
            >
              <a-row :gutter="12">
                <a-col
                  :span="8"
                  v-for="(page, index2) in item"
                  :key="index2"
                  style="height:100%; margin-bottom:1vh"
                >
                  <div
                    class="box-border"
                    style="height:44vh"
                    @click="toClick(page)"
                  >
                    <div class="imgList">
                      <img :src="require(`./assets/dv_img/${page.name}.png`)" />
                    </div>
                    <p class="tit">
                      <span>{{ page.name }}</span>
                    </p>
                    <!-- <p class="description" style="">{{ item.description }}</p> -->
                  </div>
                </a-col>
              </a-row>
            </div>
            <div class="bnr-con imgstyle">
              <img src="./assets/cs1.png" />
            </div>
            <div class=" bnr-con imgstyle">
              <img src="./assets/cs2.png" />
            </div>
            <!-- <div class=" bnr-con imgstyle">
              <img src="./assets/cs3.png" />
            </div>
            <div class=" bnr-con imgstyle">
              <img src="./assets/cs4.png" />
            </div> -->
          </a-carousel>
        </div>
      </div>
      <bnr-screen-3 ref="model"></bnr-screen-3>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/eq/ToHead.vue'
import { sysQuery } from './api/dataApi'
import BnrScreen3 from './BnrScreen3.vue'
// const imgD = require('./assets/dvImgList.json')

export default {
  name: 'App',
  components: {
    ToHead,
    BnrScreen3,
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      title: '博耐尔试验中心',
      eqList1: [],
      eqList2: [],
      eqList3: [],
      eqList4: [],
      bjData: [],
      pageIndex: 0,
      eqname: '',
      description: '',
      timeInterval: null,
      eqDetail: {},
      imgList: [],
      eqPageList: [],
      flag: true,
    }
  },
  created() {
    this.getData()
    console.log(this.date)
  },
  computed: {
    autoplaySpeed() {
      return 1000 * 10
    },
  },

  watch: {
    // eqname(val) {
    //   this.eqList.forEach((item) => {
    //     if (item.name == val) {
    //       this.imgList = imgD[val]
    //       item['isRuning'] = true
    //     } else {
    //       item['isRuning'] = false
    //     }
    //   })
    // },
  },

  mounted() {
    // this.timeInterval = setInterval(() => {
    //   this.getData()
    // }, 1000 * 10)
  },

  methods: {
    toClick(item) {
      this.$refs.model.toOpen(item)
    },

    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_chart_device'
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        // pageSize: 50,
        pageIndex: -1,
        sortField: '',
        sortOrder: '',
      }
      sysQuery(params)
        .then((res) => {
          that.eqList = res.data ? res.data : []
          const newD = JSON.parse(JSON.stringify(res.data))
          that.eqname = res.data ? res.data[0].name : ''
          let resultArr = []
          for (var i = 0; i < newD.length; i += 6) {
            resultArr.push(newD.slice(i, i + 6))
          }
          that.eqPageList = resultArr
          console.log('that.eqPageList', that.eqPageList)
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员3！')
        })
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.imgList {
  height: 39vh;
  img {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(4, 62, 168, 0.3);
  }
}
.description {
  padding-left: 10px;
  padding-right: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #33ccff;
}

.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 90vh;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1vh;
  cursor: pointer;
}
.bnr-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 15px 15px;
  box-sizing: border-box;
  height: 10vh;
  .wx-head-con {
    flex: 1;
    border-radius: 4px;
    height: 100%;
    padding: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    .left {
      width: 100px;
      font-size: 38px;
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      .num {
        font-size: 24px;
        margin-bottom: 1px;
        letter-spacing: 1px;
      }
      .title {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
}

.left {
  padding: 0px 15px;
  .px2vh(line-height, 48);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.tit {
  .px2font(17);
  .px2vh(padding-top, 10); // font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
}
.runing {
  font-weight: bold;
  // background: rgba(51, 204, 255, 0.6);
  border: 1px solid #07d7ca;
  // box-shadow: inset 0px 0px 20px 0px rgba(2, 187, 124, 0.5);
  // box-shadow: inset 0px 0px 20px 0px rgba(51, 204, 255, 0.5);
  box-shadow: inset 0px 0px 20px 0px rgba(39, 255, 242, 0.5);
  .anticon {
    color: #27fff2 !important;
  }
  span {
    color: #27fff2 !important;
  }
}
.up {
  height: 51vh;
}
.down {
  height: 37vh;
  box-sizing: border-box;
  margin-top: 2vh;
}
.table-bg {
  background: url('./assets/images/bk2.png');
  background-size: 100% 100%;
  height: 37vh;
}
.name {
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  p {
    line-height: 24px;
  }
  span {
    color: #ccc;
    font-size: 14px;
  }
  .hwname {
    color: #67e0e3;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.bjname {
  color: #1ed3e5;
  font-size: 1.5rem;
}
.eqname {
  position: absolute;
  right: 5%;
  top: 5%;
  color: #1ed3e5;
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  color: #ccc !important;
}
.warrper ::v-deep .dv-scroll-board .header .header-item {
  color: #33ccff !important;
}

.warrper ::v-deep .ant-select-selection {
  border: 1px solid #122794;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
  cursor: pointer;
}

.ant-carousel .custom-slick-arrow {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.9;
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}
.imgstyle img {
  width: 100%;
  height: 100%;
}
</style>
